<template>
  <div class="updata_index">
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <template slot="operation" slot-scope="text, record, index">
        <div>
          <a-button icon="edit" @click="edit($event, text, record, index)">
            edit
          </a-button>
        </div>
      </template>
    </a-table>
    <c-dialog v-model="dialog" :handleOk="handleOk">
      <cForm ref="cForm" v-if="dialog" :rowItem="row_item"></cForm>
    </c-dialog>
  </div>
</template>
<script>
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    width: 80,
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address 1",
    ellipsis: true,
  },
  {
    title: "Long Column Long Column Long Column",
    dataIndex: "address",
    key: "address 2",
    ellipsis: true,
  },
  {
    title: "Long Column Long Column",
    dataIndex: "address",
    key: "address 3",
    ellipsis: true,
  },
  {
    title: "Long Column",
    dataIndex: "address",
    key: "address 4",
    ellipsis: true,
  },
  {
    title: "operation",
    dataIndex: "operation",
    text: "123",
    // fixed: 'right',
    scopedSlots: { customRender: "operation" },
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 2 Lake Park, London No. 2 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];

import cDialog from "@/components/dialog/index.vue";
import cForm from "./form.vue";
export default {
  name: "update_index",
  data() {
    return {
      data,
      columns,
      dialog: false,
      checkNick: false,
      row_item: {},
    };
  },
  components: {
    cDialog,
    cForm,
  },
  methods: {
    edit(e, text, record, index) {
      console.log(e, text, record, index);
      this.row_item = record;
      this.dialog = true;
    },
    check() {
      this.form.validateFields((err) => {
        if (!err) {
          console.info("success");
        }
      });
    },

    handleOk() {
      console.log(this.$refs.cForm.form);
      this.dialog = false;
    },
  },
};
</script>
